<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="24">
        <!-- 输入框表单 -->
        <!-- <el-form :model="fromData" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="接单用户" prop="UserId">
            <el-input v-model="fromData.userName" placeholder="请输入用户名称" clearable style="width: 240px"
              @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="任务量" prop="TaskLoad">
            <el-input v-model="fromData.TaskLoad" placeholder="请输入手机号码" clearable style="width: 240px"
              @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="订单状态" prop="OrderStatus">
            <el-select v-model="fromData.OrderStatus" placeholder="用户状态" clearable style="width: 240px">
              <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
                :value="JSON.parse(dict.value)" />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间" style="width: 308px;">
            <el-date-picker value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期"
              end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form> -->

        <!-- 表格数据 -->
        <el-table v-loading="loading" :data="addData" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="接单用户" align="center" key="nick" prop="UserId" :show-overflow-tooltip="true" />
          <el-table-column label="任务量" align="center" key="phone" prop="TaskLoad" />
          <el-table-column label="用户状态" align="state" key="UserState">
            <template #default="scope">
              <el-tag type="danger" v-if="scope.row.OrderStatus === 10">拒绝</el-tag>
              <el-tag type="info" v-if="scope.row.OrderStatus === 20">待定</el-tag>
              <el-tag type="warning" v-if="scope.row.OrderStatus === 30">进行中</el-tag>
              <el-tag type="success" v-if="scope.row.OrderStatus === 40">已完成</el-tag>
              <el-tag type="danger" v-if="scope.row.OrderStatus === 50">待结算</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="creationTime" width="160">
            <template #default="scope">
              <span>{{ parseTime(scope.row.creationTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <pagination v-show="total > 0" :total="total" v-model:page="addData.skipCount"
          v-model:limit="addData.maxResultCount" @pagination="getList" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { getOrderList } from "@/api/order/request";



// 提交给后端的搜索框数据 筛选时用到
const fromData = reactive({
  userName: '',
  TaskLoad: '',
  OrderStatus: ''
});

// 提交给后端的表格数据
const addData = ref([
  {
    // 接单用户
    UserId: '11',
    // 任务量
    TaskLoad: '12',
    // 订单状态
    // 拒绝:Reject-10 
    // 待定: Undetermined-20 进行中: UnderWay-30 
    // 已完成: Completed-40 待结算: WaitBalanceDue-50
    OrderStatus: 20,
    // 创建时间
    creationTime: +new Date(),

  }
]);

onMounted(() => {
  getList()
});
// 控制是否显示 工具栏
const showSearch = ref(true);
// 选择的数据
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
// 分页器总数
const total = ref();

/* 进入页面获取数据 */
const getList = async () => {
  const res = await getOrderList();
  // 获取到总数
  total.value = res.data.totalCount
  // 获取的数据赋值
  addData.value = res.data.items;

}


/** 选择数据的条数  */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};

/** 重置操作表单 */
function reset() {
  Object.assign(fromData, {
    userName: '',
    TaskLoad: '',
    OrderStatus: ''
  });
};

// 搜索处理函数
function handleQuery() {
  // 执行搜索逻辑
}

// 重置查询条件
function resetQuery() {
  reset();
}



</script>
